<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="true"
      :defaultSort="defaultSort"
      :columns="columns"
      :apiUrl="apiUrl"
      :permission="permission"
      :formData="formData"
      :showPage="true"
      @openFormBefore="openFormBefore"
    >
      <template #roleKey="{ row }">
        <el-tag>{{ row.roleKey }}</el-tag>
      </template>
      <template #status="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="handleChange(row)"
        />
      </template>
    </Table>
  </div>
</template>

<script setup name="Role">
import Table from "@/components/Table";
import { getRoleList, putRole, addRole, delRole, getRole } from "@/api/role";
import { roleToMenu } from "@/api/menu";
const { proxy } = getCurrentInstance();

const tableRef = ref();
const defaultSort = ref({prop: 'roleSort', order: 'descending'});
const columns = [
  {
    prop: "id",
    label: "角色编号",
    width: 100,
    align: "center",
  },
  {
    prop: "roleName",
    label: "角色名称",
    align: "center",
  },
  {
    prop: "roleKey",
    label: "权限字符",
    align: "center",
  },
  {
    prop: "roleSort",
    label: "排序",
    align: "center",
    sortable:"custom"
  },
  {
    prop: "status",
    label: "状态",
    align: "center",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "center",
    sortable:"custom"
  },
];
const menuList = ref([]);
const formData = reactive([
  {
    type: "input",
    label: "角色名称",
    placeholder: "请输入角色名称",
    prop: "roleName",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入角色名称", trigger: "blur" },
      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    label: "权限字符",
    placeholder: "请输入权限字符",
    prop: "roleKey",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [{ required: true, message: "请输入权限字符", trigger: "blur" }],
  },
  {
    type: "number",
    label: "排序",
    placeholder: "请输入排序(从大到小)",
    prop: "roleSort",
    default: 1,
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入排序(从大到小)", trigger: "blur" }],
  },
  {
    type: "switch",
    label: "状态",
    placeholder: "请选择角色状态",
    prop: "status",
    default: 1,
    options: {
      activeValue: 1,
      inactiveValue: 0,
    },
    width: "70%",
    searchShow: true,
    searchOption: [
      { value: 1, label: "启用" },
      { value: 0, label: "停用" },
    ],
    rules: [{ required: false, message: "请选择角色状态", trigger: "blur" }],
  },
  {
    type: "tree",
    label: "菜单分配",
    placeholder: "请输入权限字符",
    prop: "menu",
    default: [],
    options: [],
    nodeKey: "id",
    props: {
      label: "label",
      children: "children",
    },
    width: "70%",
    searchShow: true,
    rules: [],
    change: (val,check,children) => {

    },
  },
  {
    type: "datetimerange",
    label: "创建时间",
    placeholder: ["筛选创建时间(开始点)", "创建时间(结束点)"],
    prop: "createTime",
    default: [],
    showRule: [],
    searchShow: true,
    width: "70%",
  },
]);

const apiUrl = {
  list: getRoleList,
  edit: putRole,
  add: addRole,
  del: delRole,
  get: getRole,
};

const permission = {
  add:"admin:role:add",
  edit:"admin:role:edit",
  del:"admin:role:del"
};

const handleChange = (row) => {
  if (!tableRef.value) return;
  tableRef.value.handleTableData(row);
};
const openFormBefore = (val) => {
  formData[4].options = [];
  getMenuByRoleid(val.id, val);
};
const getMenuByRoleid = (id, val) => {
  roleToMenu({ id }).then((res) => {
    if (res.code == 200) {
      formData[4].options = res.data.rows;
      formData[4].default = res.data.check;
      // val.menu = res.data.check;
    }
  });
};
// getMenuByRoleid();
</script>

<style scoped lang="scss"></style>
